<template>
    <div>
        <h2>这里是登陆页面</h2>
        <h4>当前的token：{{nowToken}}</h4>
        <h5>{{newT}}</h5>
        <button @click="changeToken">改变token</button>
        <p>
            <button @click="loginEvt">登陆</button>
        </p>
        <p>
            <input type="text" v-model="secondName">
            <input type="text" v-model="firstName">
        </p>
        <p>
            <b>观察属性：</b><span>{{fullName}}</span>
        </p>
        <p>
            <b>计算属性：</b><span>{{theFullName}}</span>
        </p>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                nowToken:'永远单身',
                newT:'',
                firstName:'',
                secondName:'',
                fullName:''
            }
        },
        methods:{
            loginEvt(){
                this.$router.push('./home')
            },
            changeToken(){
                this.$store.commit('common/mutationToken',Math.random())
                this.nowToken = this.$store.getters['common/getToken']
            }
        },
        created(){
            this.nowToken = this.$store.getters['common/getToken']
        },
        watch:{
            nowToken:function(newValue,oldValue){
                this.newT = '当前的token：' + newValue
            },
            // firstName:function(val) {
            //     this.fullName = val + ' ' + this.secondName
            // },
            // secondName:function (val) {
            //     this.fullName = this.firstName + ' ' + val
            // }
        },
        computed:{
            //这里定义的变量名不能和data中变量名重复
            theFullName(){
                return this.firstName + ' ' + this.secondName
            }
        }
    }
</script>